<div class="flex flex-column flex-auto overflow-auto">
  <div class="bg-darken-1 bg-panel border-bottom py3 px3 m0">
    <h4 class="primary-color col pt1 pb2 m0">
      {{ node && node.name || 'No component selected' }}
      &nbsp;
      <a href="#"
         class="red-1 node-item-property no-highlight"
         *ngIf="node && node.name && node.isComponent"
         (click)="onViewComponentSource()">
        (View Source)
      </a>
    </h4>
    <span class="h4 regular right primary-color no-highlight"
          *ngIf="node">
      ($$el in Console)
    </span>
  </div>

  <div
    *ngIf="node && (node.changeDetection !== null && node.changeDetection !== undefined)"
    class="section-title bg-darken-1 bg-panel primary-color pointer border-bottom py2 px3">
    <span class="info-key">Change Detection: </span>{{changeDetectionStrategies[node.changeDetection]}}
  </div>

  <div [hidden]="!(node && node.name)">
    <accordion sectionTitle="Instance Providers" *ngIf="hasInstanceProviders" [defaultExpanded]="true">
      <div section-content>
        <bt-render-state
          [componentMetadata]="componentMetadata"
          [metadata]="metadata"
          [level]="0"
          [path]="path"
          [state]="instanceProvidersObject"
          (updateValue)="onUpdateProvider($event)"
          (emitValueChange)="emitValue.emit($event)">
        </bt-render-state>
      </div>
    </accordion>

    <accordion sectionTitle="Directives" *ngIf="hasDirectives">
      <div section-content>
        <ul class="list-reset m0">
          <li *ngFor="let directive of node.directives">
            <span class="inline-block info-key">
              {{directive}}
              </span>
          </li>
        </ul>
      </div>
    </accordion>

    <accordion sectionTitle="State" [defaultExpanded]="true">
      <div section-content>
        <div [ngSwitch]="loadingState">
          <ng-template [ngSwitchCase]="ComponentLoadState.Received">
            <bt-render-state
              [componentMetadata]="componentMetadata"
              [metadata]="metadata"
              [level]="0"
              [path]="path"
              [state]="state"
              (updateValue)="onUpdateProperty($event)"
              (emitValueChange)="emitValue.emit($event)">
            </bt-render-state>
          </ng-template>
          <ng-template [ngSwitchCase]="ComponentLoadState.Failed">
            <span class="primary-color"> Failed to load component state </span>
          </ng-template>
          <ng-template class="primary-color" [ngSwitchCase]="ComponentLoadState.Loading">
            <span class="primary-color"> Loading component state... </span>
          </ng-template>
        </div>
      </div>
    </accordion>

    <accordion sectionTitle="Dependencies" *ngIf="hasDependencies">
      <div section-content>
        <bt-dependency-info
          [tree]="tree"
          [selectedNode]="node"
          (selectNode)="selectNode.emit($event)">
        </bt-dependency-info>
      </div>
    </accordion>
  </div>
</div>
